import { ColumnProps } from 'antd/lib/table';

import { Row, Spin, Table, Button, Switch, Popconfirm, message } from 'antd';

import React from 'react';
import { BrandTableContext } from '../index';
import { ProductCategory } from '../../../../models/productCategory';
import ISwitch from '../../add/components/ISwitch';
import { Link } from 'umi';

const columns: ColumnProps<ProductCategory>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '级别',
    dataIndex: 'level',
    align: 'center',
    render: text => <span>{text === 1 ? '一' : '二'}级</span>,
  },
  {
    title: '商品数量',
    dataIndex: 'productCount',
    align: 'center',
  },
  {
    title: '数量单位',
    dataIndex: 'productUnit',
    align: 'center',
  },
  // {
  //   title: '导航栏',
  //   dataIndex: 'navStatus',
  //   align: 'center',
  //   render: text => <Switch defaultChecked={text === 1} />,
  // },
  // {
  //   title: '是否显示',
  //   dataIndex: 'showStatus',
  //   align: 'center',
  //   render: value => <ISwitch value={value} />,
  // },
  {
    title: '排序',
    dataIndex: 'sort',
    align: 'center',
  },
  // {
  //   title: '设置',
  //   key: 'options',
  //   align: 'center',
  //   render: (_text, record) => (
  //     <BrandTableContext.Consumer>
  //       {table => <Button onClick={() => table.onRowDelete(record.id)}>转移商品</Button>}
  //     </BrandTableContext.Consumer>
  //   ),
  // },
  {
    title: '操作',
    key: 'actions',
    width: '220px',
    align: 'center',
    render: (_text, record) => (
      <BrandTableContext.Consumer>
        {table => (
          <div className="horizon-button-group">
            <Link to={`/product/category/add?id=${record.id}`}>
              <Button>编辑</Button>
            </Link>
            <Popconfirm
              title="确定删除吗？"
              onConfirm={() => {
                if (record.children) {
                  message.error('存在下级分类');
                } else {
                  table.onRowDelete(record.id);
                }
              }}
            >
              <Button type="danger">删除</Button>
            </Popconfirm>
          </div>
        )}
      </BrandTableContext.Consumer>
    ),
  },
];

export interface CategoryTableProps {
  categories: ProductCategory[];
  loading?: boolean;
}

export default (props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<ProductCategory>
        dataSource={props.categories}
        columns={columns}
        rowKey="id"
        bordered
      />
    </Spin>
  </Row>
)) as React.FC<CategoryTableProps>;
